컬러를 조합하는 법
컬러를 배색하는 법을 소개합니다
AI가 급속도로 발전하면서 우리는 만들어보고 싶은 무언가가 있다면, 만들 수 있는 시대가 왔다.
최근 사이드 프로젝트나 SNS에 올라오는 토이 프로젝트들을 보면 어딘가 모르게 다 비슷비슷해 보인다.
그렇다고 못난 디자인은 아니다.
깔끔하긴 한데, 특유의 AI틱한 양산형 디자인이 지루해지기도 한다.
우리가 진행 중인 프로젝트도 v0를 활용하였고, 디자인에 대한 기초지식이 없는 상태에서 진행하게 되었다.
결과적으로는 서비스의 분위기와 독창성이 없어 보인다고 느껴졌다. (그렇다고 못 봐줄 정도는 아니다)
그래서 가볍게 읽을 수 있는 디자인 책을 읽었고 그중 디자인의 가장 기본이 되는 **'색상(Color)'**의 중요성을 알게 되었다.
이 글은 디자인을 배우지 않은 개발자 혹은 바이브코더가 자신의 독창적인 색상을 만드는 가이드가 되었으면 좋겠다.
컬러 가이드를 정해야 하는 이유
경험상 정해진 서비스 컬러 없이 AI에 의존하여 만들어진 프로젝트가 거대해질수록 컬러가 정돈되지 않은 느낌을 준다. (AI를 사용하지 않아도 마찬가지다)
우리가 흔히 사용하는 에러=빨강, 성공=초록과 같은 기본적인 컬러의 규칙을 무시하는 경우도 종종 발생한다. 내 프로젝트의 메인 브랜드 컬러가 빨간색이라고 해서 '확인'이나 '성공' 버튼까지 전부 빨간색으로 통일해버리면 유저는 에러가 난 줄 알고 당황하게 된다. 에러(빨강), 성공(초록), 경고(노랑) 같은 시스템 컬러는 브랜드 컬러와 별개로 반드시 남겨두어야 한다.
또한 CTA 버튼의 색상이 화면마다 하나로 통일되지 않으면 사용자에게 혼란스럽고 불편한 상황을 만들어 줄 수 있게 된다.
이렇듯 컬러 가이드를 정해놓지 않고 프로젝트를 진행할 경우 생기는 문제점이 크기 때문에 컬러 가이드를 반드시 정해야 한다.
그렇다면 컬러 가이드를 어떻게 정해야 할까?
컬러 가이드를 정하기 전에 각 컬러별로 가져다주는 인상을 먼저 알아보자.
컬러가 가진 인상
우선 디자인에서 컬러를 고를 때는 단순히 개인적인 취향을 따르기보다 목적에 맞게 선택해야 한다.
우리는 색을 볼 때 자연스럽게 다양한 이미지를 떠올린다. 인종, 문화에 따라 색에서 느끼는 인상은 달라질 수 있다. 그러나 일반적으로 공통되게 연상되는 색의 이미지도 있는데, 이는 기본적으로 기억해 두는 것이 좋다.
난색
빨강, 주황, 노랑처럼 붉은 계열을 중심으로 한 색을 난색이라고 한다. 에너지와 활력, 친근감을 주며 사용자의 행동을 유도하는 색상이다. 또한 식욕을 자극하는 효과도 있다.
- 빨강: 뜨거움, 성숙함, 강함, 열정, 사랑, 자극, 분노, 경고, 금지
- 주황: 친근함, 따뜻함, 밝음, 기쁨, 즐거움, 비타민
- 노랑: 호기심, 협력, 행복, 영광, 희망
- 핑크: 부드러움, 귀여움, 순수함, 봄, 사랑, 환상적, 로맨스
- 갈색: 안정, 신뢰, 역사, 전통, 숙성, 보수적, 온기, 겸손
당근마켓, 카카오톡, 유튜브, 넷플릭스 등과 같은 브랜드가 있다.
한색
파랑, 하늘색, 남색처럼 푸른 계열을 중심으로 하는 색상이다. 바다나 물을 연상시키며 시원하고 상쾌한 느낌을 준다. 또한 정신적으로 안정되거나 진지한 인상을 주기도 한다.
- 파랑: 차가움, 고요함, 냉정함, 안정감, 성실함, 지성
토스, 삼성, 페이스북, 링크드인이 있다.
중성색
녹색이나 보라처럼 온도를 느끼기 어려운 색을 중성색이라고 한다. 난색이나 한색과 함께 쓰면 온도감을 표현할 수 있다.
- 녹색: 자연, 안전, 조화, 건강, 치료, 편안함, 미숙
- 보라: 고귀, 위엄, 충성, 우아, 병, 불길, 개성적, 신비로움
네이버, 컬리가 있다.
무채색
여기에 추가로 흰색, 검은색, 회색 같은 무채색이 있다. 무채색은 어떤 색과도 잘 어울리며 시선을 빼앗지 않기 때문에, 텍스트나 배경에 주로 사용되어 우리가 고른 메인 컬러를 돋보이게 해주는 훌륭한 조연 역할을 한다.
이렇게 색이 가진 인상이나 심리적 효과를 이해하면, 의도한 메시지나 감정을 보다 효과적으로 전달할 수 있다.
컬러가 주는 인상이 중요한가?
이렇게 생각할 수도 있다.
그럼 모든 서비스들은 시작할 때 색이 가진 인상을 실제로 이해하고 그걸 이용하는지?
우리가 이름만 들어도 아는 '성공한 서비스'나 '유니콘 기업'들은 100% 철저한 계산과 심리학적 근거를 바탕으로 브랜드 컬러를 선택한다.
하지만 초기 스타트업 같은 경우에는 당장의 서비스 구현(기능)이 훨씬 중요하기 때문에, 남들이 많이 쓰는 무난한 색상이나 창업자의 개인적인 취향으로 시작하는 경우가 흔하다.
그럼에도 불구하고 우리는 어느 정도 컬러에 대한 인상을 이미 알고 있기 때문에 무의식적으로 프로젝트에 어울리는 컬러를 선정하게 된다.
3가지 색상을 조합하기
색을 고르는 것만큼 중요한 것이 바로 어떤 비율로 그 색을 조합할 것인가다. 여기서 핵심이 되는 요소는 '베이스 컬러', '메인 컬러', '악센트 컬러' 세 가지다.
다음 문단에서 설명하겠지만 디자인 법칙에는 60/30/10 법칙이 있다. 이 법칙만 지켜도 컬러를 무난하게 조합할 수 있다.
베이스 컬러(Base Color) - 60%
디자인 전체의 바탕이 되는 색으로, 웹사이트에서는 주로 배경색에 활용된다. 디자인 초보자라면 베이스 컬러는 무조건 **완전한 흰색(#FFFFFF)이나 아주 연한 회색(다크 모드의 경우 어두운 무채색)**을 고르는 것이 가장 안전하다. 도화지가 깨끗해야 메인 컬러가 돋보이기 때문이다.
메인 컬러(Main Color) - 30%
디자인에서 가장 강조하고 싶은 테마 컬러로, 전체 분위기를 좌우하는 핵심 색상이다.
주로 메인 컬러를 브랜드 컬러로 한다.
악센트 컬러(Accent Color) - 10%
디자인에 강약을 주기 위한 원 포인트 색이다. 가장 눈에 띄는 색으로, 웹사이트의 CTA 버튼이나 콘텐츠에서 두드러지게 보이고 싶은 부분에 많이 사용된다.
악센트 컬러 고르는 법
여러 가지 색을 조합할 때는 처음에 정한 메인 컬러의 명도나 채도만 조금 조정해도 무난하게 조화를 이룰 수 있다.
하지만 이렇게만 배색하면 전체적으로 지나치게 자연스러워서 오히려 임팩트가 약해질 수 있다. 이럴 때는 분위기를 바꿔줄 새로운 색을 악센트 컬러로 선택한다.
색을 조합하는 것을 배색이라고 하는데, 전체적으로 어떤 이미지를 표현할지 배색의 방향을 먼저 정해두면 색을 고르기가 훨씬 쉬워진다.
여러 배색 방법이 있지만, 가장 사용하기 쉬운 것은 유사 색상의 배색과 보색 색상의 배색이다.
유사 색상 배색
색상환에서 서로 이웃한 색을 유사 색상이라고 한다. 색상은 서로 다르지만 차이가 크지 않으므로 조화롭고 균형 잡힌 배색이 된다.
보색 색상 배색
색상환에서 서로 정반대에 위치한 색을 보색이라고 한다. 색의 대비가 크므로 강렬하고 활기찬 인상을 준다. 단, 색 차이가 큰 만큼 명도나 채도를 통일해야 균형이 유지된다.
색상 조합을 아무리 예쁘게 맞췄어도 '글자가 잘 읽히는가'를 놓치면 안 된다. 예를 들어, 눈에 띄는 밝은 노란색을 악센트 버튼으로 골랐는데 그 위에 흰색 텍스트를 얹으면 유저는 글씨를 제대로 읽을 수 없다. 버튼 색이 밝으면 어두운 글씨를, 어두우면 밝은 글씨를 써서 텍스트와 배경의 명도 대비를 확실하게 주어야 한다.
60/30/10 법칙
디자인 기법 중 가장 기본이 되는 컬러 비율 60/30/10 법칙이 있다.
3가지 컬러를 활용해서 60/30/10 비율로 디자인을 할 경우 균형 있게 표현할 수 있다.
이 법칙은 모든 디자인 개념에도 적용이 되는 법칙이다.
애니메이션에 적용된 60/30/10 법칙
이 법칙을 사용한다고 해서 무조건적으로 3가지 색상만 사용하지 않아도 된다. 서비스가 커질 경우 자연스럽게 메인 컬러 또는 악센트 컬러를 세분화하면 된다.
마치며
디자인 컬러배색, 색조합 참고 사이트 모음 해당 블로그에 배색 조합을 시도해볼 수 있는 서비스들을 소개해둬서 참고하면 좋을 거 같다.
컬러와는 다른 이야기이지만 디자인(UX/UI)를 뒷전에 두고 일단 기능부터 돌아가게 만들자라는 의견에 조금은 회의적이다.
첫눈에 들어오는 디자인과 사용성이 좋아야 사용자에게 긍정적인 인상을 남길 수 있다.
사용자가 불편함을 느끼고 이탈해버린다면, 밤새워 만든 그 프로덕트도 결국 존재 가치를 잃기 때문이다.
참고문헌
END OF ARTICLE